import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router'
import {Table, Button,Row,Col,Icon,Layout, Breadcrumb,Input,DatePicker,Dropdown,Popconfirm, Menu} from 'antd';
// import SelectPageTable from '../../components/SelectPageTable.js';
import style from '../../styles/TableCss.less';
import reqwest from 'reqwest';
// import {PublicCustomer} from '../utils/PublicCode.js'
// import TopUpBoxAmt from './components/TopUpBpxAmt.js'
// console.log(PublicCustomer)
const {  Content, Footer ,Sider} = Layout;
// const { RangePicker } = DatePicker;
function onChange(value, dateString) {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
}
function onOk(value) {
  console.log('onOk: ', value);
}
class Customer extends React.Component{
	constructor(props){
		super(props);
		this.state={
			data: [],
		    pagination: {},
		    loading: false,
	      selectedRowKeys: [],
	      dropDown:'所有客户',
	      columns :[{
				  title: '客户名称',
				  dataIndex: 'name',
				  // sorter: true,
				  width: '20%',
				}, {
				  title: '电话',
				  dataIndex: 'phone',
				  // filters: [
				  //   { text: 'Male', value: 'male' },
				  //   { text: 'Female', value: 'female' },
				  // ],
				  width: '20%',
				}, {
				  title: '地址',
				  dataIndex: 'address',
				}, {
				  title: '动作',
				  key: 'action',
				  render: (text, record) => (
				    <span>
				      <Link to={{pathname:'/app/editcus',remark:record.remark,query:{ims:record.key,province:record.province,area:record.area,city:record.city,'current':this.props.location.query.current,name:record.name,phone:record.phone,street:record.street,remark:record.remark}}}>编辑</Link>
				    </span>
				  ),
				}]
		}
	}
		// <Popconfirm title="确认删除吗?" onConfirm={(e) => this.onDelete(record.key, e,this)}>
				      // <span className="ant-divider" />
				     		// <a>删除</a>
		// 		     	</Popconfirm>
	onDelete(key,e,_this){
    const data = _this.state.data.filter(item => item.key !== key);
    _this.setState({data });
  }
	handleTableChange(pagination, filters, sorter){
    const pager = { ...this.state.pagination };
    // console.log(pagination.current)
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch (params = {}) {
    console.log('params:', params);
    let _data=[];
    
    this.setState({ loading: true });
    reqwest({
      url: window.host+'/api/customers',
      method: 'get',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        page:params.page,
      },
      type: 'json',
    }).then((data) => {
    	console.log(data);
   	    const pagination = { ...this.state.pagination };
      // Read total count from server
      // pagination.total = data.totalCount;
      if(params.page==1){
        pagination.total = data.total;
  	  }
        // debugger
        for(let i of data.list){
	        _data.push({
	        	key:i.id,
	        	name:i.name,
	        	phone:i.tel,
	        	address:i.province+i.city+i.area+i.street,
	        	province:i.province,
	        	city:i.city,
	        	area:i.area,
	        	street:i.street,
	        	remark:i.remark
	        })
	    }
      this.setState({
        loading: false,
        data: _data,
        pagination,
      });
    });
  }
	componentWillMount(){
		this.fetch({page:1});
	}
	menuClick(e){
		console.log(e.item.props.value)
		this.setState({dropDown:e.item.props.value});
	}
	componentDidMount(){

	}
	render(){

		const { selectedRowKeys,data,pagination,loading,dropDown,columns } = this.state;
  	const customerMemu=(
  		<Menu onClick={this.menuClick.bind(this) } selectedKeys={[dropDown]}>
		    <Menu.Item value='所有客户'>
		      <a target="_blank" rel="noopener noreferrer">所有客户</a>
		    </Menu.Item>
		    <Menu.Item value='我的客户'>
		      <a target="_blank" rel="noopener noreferrer" >我的客户</a>
		    </Menu.Item>
		    <Menu.Item value='aaaa'>
		      <a target="_blank" rel="noopener noreferrer">aaaa</a>
		    </Menu.Item>
		  </Menu>
  	)
		return(
			<Layout style={{background:'#fff',height:'100%'}}>
				<Content >
					<Row >
            <Col  sm={{span:7,offset:0}} xs={{span:9}} style={{padding:'24px 25px 0px'}}>
							客户
						</Col>
            <Col xl={{span :3,offset:13}} lg={{span:3,offset:13}} md={{span:3,offset:13}} sm={{span:3,offset:13}} xs={{span:2,offset:8}} style={{lineHeight:'60px',textAlign:'right'}}>
							<Button ><Link to={{pathname:'/app/newcus',query:{current:this.props.location.query.current}}}>新建客户</Link></Button>
						</Col>
					</Row>
					<Layout className={`${style.tb_serbor}`}>
						<Row  className={`${style.tb_ser}`}>
							<Col sm={{span:7}} xs={{span:0}}>
							</Col>
              <Col sm={{span:7,offset:10}} xs={{span:14,offset:10}} style={{textAlign:'right'}}>
								
							</Col>
						</Row>
			      <Table columns={columns}
			        dataSource={data} onRowClick={this.handleRowClick}
			        pagination={pagination}
			        loading={loading}
			        onChange={this.handleTableChange.bind(this)}
			      />
		      </Layout>
				</Content>
			</Layout>	
		)
	}
}
// rowSelection={rowSelection} 批量删除
// <Input.Search 
								// 	placeholder="input search text"
							 //    onSearch={value => console.log(value)}
								//  />
Customer.PropTypes={

}
export default connect()(Customer);